<template>
	<view class="page">
		<sub-nav></sub-nav>
		<view class="" :key="dropKey">
			<u-dropdown class="drop">
				<u-dropdown-item v-model="selections.type" title="类型" :options="type_options"></u-dropdown-item>
				<u-dropdown-item v-model="selections.format" title="格式" :options="formats_options"></u-dropdown-item>
			</u-dropdown>
		</view>

		<view>
			<showResourceList :select='selections' :resourcelist='showList' :key='showKey'></showResourceList>
		</view>
		<view class="empty" v-if="showList.length === 0">
			<u-empty text="数据为空" mode="list" icon-size="240" font-size="35" ></u-empty>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				dropKey: 0,
				showKey: 0,
				selections: {
					type: 1,
					format: 1,
				},
				formats_options: [{
					label: '全部',
					value: 1
				}, {
					label: '',
					value: 2
				}, {
					label: '',
					value: 3
				}],
				type_options: [{
					label: '全部',
					value: 1
				}, {
					label: '',
					value: 2
				}, {
					label: '',
					value: 3
				}],
				resourcelist: [],
				showList: []
			}
		},
		methods: {

		},
		watch: {
			selections: {
				handler(val, oldval) {
					if (val.format === 1 && val.type === 1) {
						this.showList = this.resourcelist
					} else {
						this.showList = []
						this.resourcelist.forEach((item, index) => {
							if ((val.format === 1 || item.learningResourceFormat.name === this.formats_options[val.format - 1].label) &&
								(val.type === 1 || item.learningResourceType.name === this.type_options[val.type - 1].label)) {
								this.showList.push(item)
							}
						})
					}
					console.log(this.showList);
					this.showKey += 1
				},
				deep: true
			}
		},
		onReady: function(option) { //option为object类型，会序列化上个页面传递的参数
			this.$api.myDownloadget(this.$store.state.access_token, '')
				.then(res => {
					console.log(res);

					res.values.formats.forEach((item, index) => {
						this.formats_options[index + 1] = {
							label: item.name,
							value: Number(index + 2)
						}
					})

					res.values.types.forEach((item, index) => {
						this.type_options[index + 1] = {
							label: item.name,
							value: Number(index + 2)
						}
					})
					this.dropKey += 1
					return this.$api.myDownloadpost(this.$store.state.access_token)
				}).then(res => {
					this.resourcelist = res.values.records
					this.showList = res.values.records
					console.log(this.resourcelist);
				})
		}
	}
</script>

<style lang="scss">
	page {
		background-color: $uni-bg-color;
	}

	.drop {
		background-color: white;
	}

	.empty {
		position: fixed;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	}
</style>
